<template>
	<view class="container">
		<view class="tui-box">
			<progress :percent="percent" show-info stroke-width="3" activeColor="#5677fc" active-mode="forwards" />
			<view class="tui-text">{{$t('It_is_being_updated')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: 0
			};
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			this.update(options.url || '');
			// #endif
		},
		onBackPress() {
			return true;
		},
		methods: {
			update(downUrl) {
				let that = this;
				this.percent = 5;
				const downloadTask = uni.downloadFile({
					url: downUrl,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							plus.runtime.install(
								downloadResult.tempFilePath, {
									force: true
								},
								function() {
									plus.runtime.restart();
								},
								function(e) {
									that.showModal();
								}
							);
						}
					},
					fail: () => {
						that.showModal();
					}
				});
				downloadTask.onProgressUpdate(res => {
					that.percent = res.progress;
				});
			},
			showModal() {
				this.tui.model(this.$t('Warm_reminder'), this.$t('Upgrade_failed'), false, res => {
					plus.runtime.restart();
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: $uni-bg-color;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: $uni-bg-color;

		.tui-box {
			position: fixed;
			width: 100%;
			top: 50%;
			padding: 0 45rpx;
			margin-top: -50rpx;
			box-sizing: border-box;
			text-align: center;

			.tui-text {
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				padding-top: 18rpx;
			}
		}
	}
</style>